<template>
  <div class="com-full" style="position: relative">
    <div class="no-video video-js com-full" v-if="!url">暂无视频数据</div>
    <video
      ref="videoPlayer"
      class="video-js com-full"
      muted
      controls
      autoplay
      v-else
    ></video>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'

// window.videocales = {}
export default {
  name: 'VideoBox',
  props: {
    url: {
      type: String,
      default: ''
    },
    aspectRatio: {
      type: String,
      default: '16:9'
    },
    name: {
      type: String,
      default: ''
    }
  },
  // 销毁监控画面
  beforeDestroy () {
    this.destroyVideo()
  },
  watch: {
    url: {
      handler (val) {
        if (val && !this.flvPlayer) {
          this.flvInit(val)
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      myUrl: '',
      test: ''
    }
  },
  methods: {
    // todo 二期优化逻辑 这里的销毁需要重构
    destroyVideo () {
      if (this.flvPlayer) {
        this.flvPlayer.pause()
        this.flvPlayer.unload()
        this.flvPlayer.detachMediaElement()
        this.flvPlayer.destroy()
        this.flvPlayer = null
      }
    },
    // 计算加载时间
    getLoadTime (dom) {
      let b = true
      let start = 0
      dom.onplay = () => {
        start = new Date().getTime()
        b && console.log(this.name, '开始加载')
        b = false
      }
      let a = true
      dom.oncanplay = () => {
        if (a && this.name) {
          a = false
          let end = new Date().getTime()
          let loadtime = end - start
          console.log(this.name + '加载了' + loadtime + 'ms')
        }
      }
    },
    load (url) {
      let dom = this.$refs['videoPlayer']

      this.getLoadTime(dom)

      // eslint-disable-next-line no-undef
      this.flvPlayer = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        hasAudio: false,
        controls: true,
        url: url
      }, {
        enableWorker: false, 			//不启用分离线程
        enableStashBuffer: false, 		//关闭IO隐藏缓冲区
        autoCleanupSourceBuffer: true 	//自动清除缓存
      })
      this.flvPlayer.attachMediaElement(dom)
      this.flvPlayer.load()
      this.flvPlayer.play()
      this.test = 't_' + this.url
      // window.videocales[this.test] = this.flvPlayer
      // eslint-disable-next-line no-undef
      this.flvPlayer.on(flvjs.Events.ERROR, () => {
        this.destroyVideo()
        setTimeout(() => {
          this.load(url)
        }, 1000);
      })
    },
    flvInit (url) {
      this.$nextTick(() => {
        this.myUrl = url
        this.destroyVideo()
        if (this.flvPlayer) {
          setTimeout(() => {
            this.load(url)
          }, 1000);
        } else {
          this.load(url)
        }

      })
    },
  }
}
</script>

<style scoped>
.video-js .vjs-icon-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.video-js {
  width: 100% !important;
  height: 100% !important;
}
</style>


<style lang="scss" scoped>
.no-video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  z-index: 1;
  background-color: black;
  font-size: 28px !important;
}
</style>